<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<base href="../"/>
	<title>EaselJS Example: Passing interactions between a Context2D and WebGL stage.</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<style>
		.canvasHolder {
			position: relative;
			width: 960px;
			height: 400px;
		}
		#webGLCanvas {
			position: absolute;
			right: 0;
			top: 0;
			border: 1px solid #0BF;
			background: rgba(0,180,255,0.1);
		}
		#c2dCanvas {
			position: absolute;
			right: 0;
			top: 50px;
			border: 1px solid #0F0;
			background: rgba(0,255,0,0.2);
		}
	</style>

</head>

<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Two Stages passing mouse events</h1>
	    <p>This example shows a Context2D <code>Stage</code> (green) passing unhandled mouse events through to a WebGL <code>SpriteStage</code> (blue) layered below it via <code>.nextStage</code>.
	    Notice that the rollover on the bottom stage works even while over the top (green) canvas.</p>
	    <p>For example, this could be used for layering a rich UI with vector art & filters over a highly performant WebGL game engine.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="webGLCanvas" width="958" height="398"></canvas>
		<canvas id="c2dCanvas" width="958" height="160"></canvas>
	</div>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>
	
	<!-- WebGL specific classes -->
	<script type="text/javascript" src="../src/easeljs/display/SpriteContainer.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteStage.js"></script>
	
	<script type="text/javascript" src="assets/tweenjs-NEXT.min.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/MovieClip.js"></script>
	
	<script type="text/javascript" src="assets/VectorButton.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>

		function init() {
			// load the source image:
			var image = new Image();
			image.src = "assets/bitmapButton.png";
			image.onload = handleImageLoad;
		}
	
		function handleImageLoad(evt) {
			webGLStage = new createjs.SpriteStage("webGLCanvas");
			webGLStage.enableMouseOver();
			
			c2dStage = new createjs.Stage("c2dCanvas");
			c2dStage.enableMouseOver(10);
			c2dStage.nextStage = webGLStage;
			
			// spritesheet "bitmap" button:
			var spriteSheet = new createjs.SpriteSheet({
				images: [evt.target],
				frames: {width:300, height:100},
				animations: { out: 0, over: 1, down: 2 }
			});
			var bitmapButton = new createjs.Sprite(spriteSheet, "up");
			webGLStage.addChild(bitmapButton).set({x:250, y:150});
			var bitmapHelper = new createjs.ButtonHelper(bitmapButton);
		
			// movieclip "vector" button:
			var vectorButton = new lib.VectorButton();
			c2dStage.addChild(vectorButton).set({x: 50, y:50});
			var vectorHelper = new createjs.ButtonHelper(vectorButton);
		
			createjs.Ticker.addEventListener("tick", c2dStage);
			createjs.Ticker.addEventListener("tick", webGLStage);
		}
	</script>

</body>
</html>
